<template>
    <div>
        <!-- 操作结果 -->
        <Modal
            v-model="isResultModalVisible"
            class-name="vertical-center-modal"
            :closable="false"
            :mask-closable="false"
            title="操作结果"
            width="800">

            <Row v-for="result in operateResult" type="flex" align="middle" :key="result.title" style="margin-top:10px;">
                <Col span="8" style="font-weight:bold;text-align:right">{{result.title}}：</Col>
                <Col span="9">
                    <Progress :percent="result.value || 0" :status="result.status"></Progress>
                </Col>
                <Col span="7" style="color:#ed3f14;text-align:left;font-size:12px;" v-if="result.value!==100">
                    {{result.reason}}
                </Col>
                <Col span="7" style="color:#19be6b;text-align:left;font-size:12px;" v-if="result.value==100">
                    指令发送成功
                </Col>
            </Row>

            <div slot="footer" style="padding:10px 0">
                <Button type="primary" @click="closeResultModal" :loading="!completed">
                    {{completed ? '确 定':'操作中..'}}
                </Button>
            </div>
        </Modal>
    </div>

    
</template>

<script>
import { http } from '@/libs/http'
export default {
  props: {
    operateResult: {
      required: true
    },
    operateResultMulti: {
      // 包含多个操作结果的弹窗反馈
      required: false
    }
  },
  data () {
    return {
      isResultModalVisible: true,
      completed: false
    }
  },

  mounted () {
    this.operate()
  },

  methods: {
    closeResultModal () {
      this.isResultModalVisible = false

      // 关闭父级弹窗
      this.$emit('confirm')
    },

    async operate () {
      const promises = []
      let doRentOut
      let doFaceAccess

      // 单个接口执行状态展示
      this.operateResult.forEach(item => {
        this.$set(item, 'value', 30)
        if (item.title === '删除租赁记录') {
          // 退租请求需要在密码删除完再执行
          doRentOut = () => {
            http.request(
              this,
              ...item.params,
              (res, err) => {
                if (err) {
                  this.$set(item, 'value', 60)
                  this.$set(item, 'status', 'wrong')
                  this.$set(item, 'reason', (err.data && err.data.err_msg) || '内部错误')
                } else {
                  this.$set(item, 'value', 100)
                }
              },
              true
            )
          }
        } else {
          let promise = new Promise((resolve, reject) => {
            http.request(
              this,
              ...item.params,
              (res, err) => {
                if (err) {
                  this.$set(item, 'value', 60)
                  this.$set(item, 'status', 'wrong')
                  this.$set(item, 'reason', (err.data && err.data.err_msg) || '内部错误')
                } else {
                  this.$set(item, 'value', 100)
                }
                resolve(item.title)
              },
              true
            )
          })
          promises.push(promise)

          if (item.title === '删除门禁授权' || item.title === '修改门禁授权时间') {
            doFaceAccess = () => {
              this.$Message.info({content: '门禁相关操作成功，请去门禁授权列表里面检查相应的授权状态', duration: 4})
            }
          }
        }
      })

      if (this.operateResultMulti) {
        // 一个接口返回多个操作状态展示
        const { params, specialTitle } = this.operateResultMulti

        // this.operateResult.push({value: 30})
        const promise = new Promise((resolve, reject) => {
          http.request(
            this,
            ...params,
            (res, err) => {
              let obj
              if (err) {
                obj = {
                  value: 60,
                  status: 'wrong',
                  reason: (err.data && err.data.err_msg) || '内部错误',
                  title: '内部错误'
                }
                this.operateResult.push(obj)
              } else {
                const { paas_result } = res
                const keys = Object.keys(paas_result)

                if (keys.length) {
                  keys.map(value => {
                    // 遍历返回对象
                    const { ErrNo, ErrMsg, room_name } = paas_result[value]

                    // const status = ErrNo === 0 ? '成功' : '失败';

                    obj = {
                      value: 100,
                      title: room_name + '指纹授权' + specialTitle
                    }

                    if (ErrNo !== 0) {
                      obj.reason = `${specialTitle}指纹授权失败(${ErrMsg})`
                      obj.status = 'wrong'
                      obj.value = 60
                    }

                    this.operateResult.push(obj)
                  })
                }
                if (this.operateResult.length === 0) {
                  this.closeResultModal()
                }
              }
              resolve(obj)
            },
            true
          )
        })
        promises.push(promise)
      }

      await Promise.all(promises).then(doRentOut).then(doFaceAccess)

      this.completed = true
    }
  }
}
</script>

<style lang="less">
</style>
